<template>
  <div id="sommelires">

    <!--搜索-->
    <Search :searchContent="searchContent" :curCity="curCity"></Search>
    <!--tab切换页面-->
    <ul class="tab-ul">
      <li v-for="(tab,index) in tabs" @click="iscur=index,tabChange(index)"><span
        :class="{cur:iscur==index}">{{tab}}</span></li>
    </ul>
    <div class="content-box">
      <!--<keep-alive>-->
        <component v-bind:is="tabView" :empty="empty"></component>
      <!--</keep-alive>-->
    </div>
    <div style="display: none">{{empty}}</div>
    <!--底部footer-->
    <Footer tabNum="0"></Footer>
  </div>

</template>

<script>
  import SubSommelires from './subComments/sub-sommeliers.vue'
  import SubAgent from './subComments/sub-agent.vue'
  import SubHistory from './subComments/sub-history.vue'
  import global from '../public/global.vue'

  export default {
    components: {SubSommelires, SubAgent, SubHistory},
    name: 'sommelires',
    props: ['curCity'],
    data() {
      return {
        tabNum: 0,
        tabView: 'SubSommelires',
        tabViews: ['SubSommelires', 'SubAgent', 'SubHistory'],
        tabs: ["侍酒师", "经销商", "历史"],
        iscur: 0,
        searchContent: 0, //数字为0是侍酒师搜索内容，数字为1是代理商搜索内容，数字为2是历史搜索内容
        empty:0
      }
    },

    mounted() {
      let idx=global.getCookie("idx");
      if(!idx){
        idx=0;
      }
      this.tabView=this.tabViews[idx];
      this.iscur=idx;
    },
    methods: {
      tabChange(idx) {
        this.tabView = this.tabViews[idx];
        this.searchContent = idx;
        global.setCookie("idx",idx);
        this.empty=1;
      },

    },
    created: function () {
      document.title = "英拉助手";
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  /*#sommelires{*/
  /*height: calc( 100vh - 58px);overflow:scroll;-webkit-overflow-scrolling: touch;*/
  /*}*/
  #sommelires {
    padding-bottom: 58px;
  }

  /*tab样式*/
  @mt: 100px;
  .tab-ul {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    transition: 0.3s all;
    background: #fff;
    z-index: 10;
    li {
      flex: 1;
      text-align: center;
      font-size: 1rem;
      color: #777;
      .cur {
        display: inline-block;
        height: 100%;
        font-weight: bold;
        border-bottom: 2px solid #D44242;
        box-sizing: border-box;
        color: #D44242;
      }
    }
  }

  /*tab-内容*/
  .content-box {
    margin-top: @mt;
  }


</style>
